'use strict';
import React from 'react';
import {Form, Table} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import DescriptionGroup from "../../../components/DescriptionGroup";
import ViewTitle from "../../../components/ViewTitle";
import styles from "../../index.less";

moment.locale('zh-cn');

@Form.create()
@connect(({user, global}) => ({...user, ...global}))
export default class ModalProdDetail extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'global/getModel',
      payload: {table: 'SalesProdRecord'}
    });
  }

  getCols = () => {
    return [
      {
        title: "原料", dataIndex: 'name', key: 'name', render: (value, record) => {
          const {code} = record;
          return this.getProductionElement(code, value);
        }
      },
      {title: '原料形态', key: 'subcategory', dataIndex: "subcategory"},
      {title: '原料规格', key: 'spec', dataIndex: "spec"},
      {title: '原料编码', key: 'number', dataIndex: "number"},
      {title: '原料含量%', key: 'materialContent', dataIndex: "materialContent"},
      {title: '原料数量', key: 'materialCount', dataIndex: "materialCount"},
      {title: '单价', key: 'price', dataIndex: "price"},
      {
        title: '成本', key: 'cost', dataIndex: "cost", render: (value, record) => {
          const {price = 0, materialCount = 0} = record;
          return <div>{price * materialCount}</div>;
        }
      }];
  };

  render() {
    const {values} = this.props;
    const model = this.props[`SalesProdRecordModel`];
    if (!model) return <div></div>;
    const {materialLots = [], pkgLots = [], fileList = []} = values;
    const labels = [];

    _.map(model, (value, key) => {
      const {title, _type, enableArea} = value;
      if (_.includes(enableArea, 'detail')) {
        if (_type === 'date') {
          const temp = values[key];
          temp ? values[key] = moment(temp).format('YYYY-MM-DD') : undefined;
        }
        title && labels.push({key, label: title});
      }
    });

    return <div>
      <DescriptionGroup
        title={'商品信息'}
        labels={labels}
        values={values}
      ></DescriptionGroup>
      <ViewTitle
        title={'原料列表'}
      >
      </ViewTitle>
      <Table
        className={styles.antTable}
        bordered={true}
        columns={this.getCols()}
        dataSource={materialLots}
        scroll={{x: true}}
        pagination={true}
      ></Table>
      <ViewTitle
        title={'包材列表'}
      >
      </ViewTitle>
      <Table
        className={styles.antTable}
        bordered={true}
        columns={this.getCols()}
        dataSource={pkgLots}
        scroll={{x: true}}
        pagination={true}
      ></Table>
      {this.getPicCard(fileList)}
    </div>;
  }
}
